{"id":13749280,"url":"https://github.com/jadeallencook/gdoc-js","last_synced_at":"2025-05-09T12:32:18.814Z","repository":{"id":72164513,"uuid":"59912069","full_name":"jadeallencook/gdoc-js","owner":"jadeallencook","description":"google spreadsheet cms","archived":false,"fork":false,"pushed_at":"2021-10-19T18:02:27.000Z","size":95,"stargazers_count":425,"open_issues_count":2,"forks_count":20,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-08-20T13:02:31.090Z","etag":null,"topics":["google-sheets","javascript","library"],"latest_commit_sha":null,"homepage":"http://jadeallencook.github.io/gDoc.js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jadeallencook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-28T19:56:28.000Z","updated_at":"2024-07-08T07:20:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"39bf4130-5407-44ff-b0f6-45f4900f86c3","html_url":"https://github.com/jadeallencook/gdoc-js","commit_stats":null,"previous_names":["jadeallencook/gdoc.js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadeallencook%2Fgdoc-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadeallencook%2Fgdoc-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadeallencook%2Fgdoc-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jadeallencook%2Fgdoc-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jadeallencook","download_url":"https://codeload.github.com/jadeallencook/gdoc-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224863108,"owners_count":17382279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-sheets","javascript","library"],"created_at":"2024-08-03T07:00:58.400Z","updated_at":"2024-11-16T00:30:22.953Z","avatar_url":"https://github.com/jadeallencook.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# gDoc.js v2.0.1\n\nUse Google Spreadsheets as your CMS \u0026 to save your inputs!\n\n[Demo Page](http://jadeallencook.github.io/gDoc.js/)\n\n# Getting Started\n\nCreate a Google Spreadsheet containing all the information you will need for your site. After, choose 'Publish to the web...' in the 'File' menu. Then grab the id in the link.\n\n```\nhttps://docs.google.com/spreadsheets/d/__yourPublicId__/pubhtml\n```\n\nInside of your HTML document include these two files.\n\n```html\n\u003cscript src=\"tabletop.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"gDoc.js\"\u003e\u003c/script\u003e\n```\n\n__Or just this file__\n\n```html\n\u003cscript src=\"gDoc.min.js\"\u003e\u003c/script\u003e\n```\n\nNow at the footer of your html page initiate the connection! \n\n__By default the sheetName is 'Sheet1'__\n\n```html\n\u003cscript\u003e\n    gDoc(yourPublicId, sheetName);\n\u003c/script\u003e\n```\n\n__Example connection__\n\n```html\n\u003cscript\u003e\n    // initiating connection\n    gDoc('1cfW7dwJkwJq7rqTsftNy3wjCJR3-yDylc5MRmsc0Yw8', 'layout');\n\u003c/script\u003e\n```\n\nAll that's left now is to add gDoc attributes to your html!\n\n__Example spreadsheet__\n\n| title               | header              | subheader           |\n| ------------------- |:-------------------:| -------------------:|\n| My website          | Welcome,            | This is my website! |\n\n__How to insert from example spreadsheet above.__\n\n```html \n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle gDoc=\"title\"\u003e\u003c/title\u003e\n        \u003cscript src=\"tabletop.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"gDoc.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ch1 gDoc=\"header\"\u003e\u003c/h1\u003e\n        \u003ch2 gDoc=\"subheader\"\u003e\u003c/h2\u003e\n    \u003c/body\u003e\n    \u003cfooter\u003e\n        \u003cscript\u003e\n            gDoc(yourPublicId, sheetName);\n        \u003c/script\u003e               \n    \u003c/footer\u003e\n\u003c/html\u003e\n```\n\nAnd it's that easy!\n\n# Setting Parameters\n\nYou might want to use gDoc to set link hrefs, img srcs, and set styles. \n\n__Here's a quick example of how you would make a red link__\n\n| my-link             | my-link:href        | my-link:style       |\n| ------------------- |:-------------------:| -------------------:|\n| Example             | www.mylink.com      | color: red          |\n\n\n```html \n\u003ca gDoc=\"my-link\"\u003e\u003c/a\u003e\n```\n\n# Advanced Blocks (Store \u0026 Blog)\n\nTo iterate over a block of html simply just pass gDoc an object {}.\n\n__Let's say you want to export your 4 most recent blog posts__\n\n```javascript \ngDoc({\n    public: yourPublicId,\n    sheet: 'blog',\n    gDoc: 'blog-section',\n    columns: ['title', 'body', 'link'],\n    loop: 4,\n    html: function() {\n        var html = '\u003ca href=\"{{link}}\"\u003e';\n        html += '\u003ch1\u003e{{title}}\u003c/h1\u003e';\n        html += '\u003cp\u003e{{body}}\u003c/p\u003e';\n        html += '\u003c/a\u003e';\n        return html;\n    }\n});\n```\n\nThe loop key can be set to __false__ to iterate over all items in the document. _Make sure you instantiate all your variables in the 'columns' array, otherwise they won't show up in the mustache syntax._ \n\n# Sending Data To Spreadsheet\n\n__The \"connect\" functionality uses AJAX, make sure jQuery is installed!__\n\nCreate a Google Form by visiting _forms.google.com_ and then press share to get the id.\n\n```\nhttps://docs.google.com/forms/d/e/__yourFormId__/viewform\n```\n\nCreate a blank form that will hold your inputs.\n\n```html\n\u003cform id=\"example-form\"\u003e\u003c/form\u003e\n```\n\nIn the footer, pass gDoc.js an object with these parameters.\n\n```javascript \ngDoc({\n    connect: true,\n    id: yourFormId,\n    appendTo: 'example-form'\n});\n```\n\nThat's it, all of your inputs are automatically inserted!\n\nWhen submitted, the responses will be sent to the form, and your can export to spreadsheet from there.\n\nAdditionally you can add some optional parameters - \n\n```javascript \ngDoc({\n    connect: true,\n    id: yourFormId,\n    appendTo: 'example-form',\n    submitValue: 'Submit Form', // submit button text\n    successMsg: 'It worked!', // success message after submit\n    preloader: 'loading.gif' // img to show while form is loading\n});\n```\n\n__As of right now, gDoc will only insert \"text\" inputs.__\n\n# Custom Form CSS\n\nHere is an example of how we would modify the above form's CSS.\n\n```css\n    form#my-form input {\n        display: block;\n        margin: 5px auto;\n        padding: 5px;\n        border-radius: 3px;\n        border: #ddd solid thin;\n    }\n    form#my-form input[type=\"submit\"] {\n        background-color: dodgerblue;\n        color: #fff;\n        border: none;\n        border-radius: 3px;\n    }\n```\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadeallencook%2Fgdoc-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjadeallencook%2Fgdoc-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadeallencook%2Fgdoc-js/lists"}